<template>
	<view class="page" :style="{'--color':color, '--bgcolor':pageSet.bgColor, '--tit-size':pageSet.titSize*2+'rpx', '--tit-color':pageSet.titColor, '--tit-weight':pageSet.titWeight,
		'--info-size':pageSet.infoSize*2+'rpx', '--info-color':pageSet.infoColor, '--info-weight':pageSet.infoWeight}">
		<status-bar :title='tabTitle' back='0' :goHome='fromShare'></status-bar>
		<!-- 返回顶部 -->
		<backTop v-if='toTop'></backTop>
		<!-- 组件 -->
		<view v-if="pageData.length">
			<block v-for="(item,index) in pageData" :key="index">
				<Bannel v-if="item.type == 'banner'" :pageData="item.compCont" :isImmerse="1"></Bannel>
				<adv v-if="item.type == 'advertisement'" :pageData="item.compCont"></adv>
				<hotZone v-if="item.type == 'hotZone'" :pageData="item.compCont"></hotZone>
				<VideoList v-if="item.type == 'video'" :pageData="item.compCont"></VideoList>
				<divider v-if="item.type == 'divider'" :pageData="item.compCont"></divider>
			</block>
		</view>
		<!-- 顶部分类 -->
		<view class="classNav" :style="{top: totalHeight+'px'}" v-if='columnData'>
			<u-tabs :list="columnData" keyName="website_list_title" :lineColor="color" lineWidth="26" :current="checkId" @click="checkList"
				:inactiveStyle="{color:'#666',fontSize:'26rpx',transform:'scale(1)'}" 
				:activeStyle="{color,fontSize:'26rpx',fontWeight:'bold',transform:'scale(1.05)'}"></u-tabs>
		</view>
		
		<view v-if="artList.length">
			<!-- 自然排列 -->
			<view class="p-left30 p-right30" v-if='!pageSet.style'>
				<view v-for='(item,index) in artList' :key='index' @click="$pop.artDetails(item)">
					<!-- 没有图片 -->
					<view class="p-top30 p-bot30 bot" v-if="!item.website_article_img && !item.website_article_atlas">
						<text class="tit ellipsis_2">{{item.website_article_title}}</text>
						<view class="d-flex a-center m-top40 color_77 bold400">
							<text class="m-right12">{{item.website_article_views}}阅读</text>
							<text class="m-right12">{{item.allZan}}点赞</text>
							<text class="m-right12">{{item.allComment}}评论</text>
						</view>
					</view>
					<!-- 右边小图 -->
					<view class="p-top30 p-bot30 bot" v-if="item.website_article_img && !item.website_article_atlas">
						<view class="d-flex j-sb">
							<view style="width: 430rpx;">
								<view class="tit ellipsis_2 m-bot20">{{item.website_article_title}}</view>
								<view class="info ellipsis">{{item.website_article_info}}</view>
							</view>
							<image :src="$imgUrls(item.website_article_img)" mode="aspectFill" class="list_one_img"></image>
						</view>
						<view class="d-flex a-center color_77 bold400 m-top40">
							<text class="m-right12">{{item.website_article_views}}阅读</text>
							<text class="m-right12">{{item.allZan}}点赞</text>
							<text class="m-right12">{{item.allComment}}评论</text>
						</view>
					</view>
					<!--  一张大图 -->
					<view class="p-top30 p-bot30 bot" v-if="item.website_article_atlas.length == 1">
						<text class="tit ellipsis_2">{{item.website_article_title}}</text>
						<image :src="$imgUrls(item.website_article_atlas[0])" mode="aspectFill" class="list_MAX_img m-top30 m-bot40"></image>
						<view class="row a-center color_77 bold400">
							<text class="m-right12">{{item.website_article_views}}阅读</text>
							<text class="m-right12">{{item.allZan}}点赞</text>
							<text class="m-right12">{{item.allComment}}评论</text>
						</view>
					</view>
					<!-- 多图 -->
					<view class="p-top30 p-bot30 bot" v-if="item.website_article_atlas.length > 1">
						<text class="tit ellipsis_2">{{item.website_article_title}}</text>
						<scroll-view scroll-x="true" class="scroll-row m-top20 m-bot40">
							<image :src="$imgUrls(subItem)" mode="aspectFill" class="list_more_img" 
								v-for="(subItem,subIndex) in item.website_article_atlas" :key="subIndex"></image>
						</scroll-view>
						<view class="row a-center color_77 bold400">
							<text class="m-right12">{{item.website_article_views}}阅读</text>
							<text class="m-right12">{{item.allZan}}点赞</text>
							<text class="m-right12">{{item.allComment}}评论</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 一行两个-优先展示缩略图 -->
			<view class="padding20 d-flex f-wrap j-sb" v-if="pageSet.style == 1">
				<view class="photo m-bot40" v-for="(item, index) in artList" :key="index" @click="$pop.artDetails(item)">
					<image :src="$imgUrls(item.website_article_img)" mode="aspectFill" v-if="item.website_article_img"></image>
					<image :src="$imgUrls(item.website_article_atlas[0])" mode="aspectFill" v-else-if="item.website_article_atlas"></image>
					<image :src="staticUrl + '/images/imageLoading.png'" mode="aspectFill" v-else></image>
					<view class="padding10">
						<view class="tit m-bot10 ellipsis">{{ item.website_article_title }}</view>
						<view class="info ellipsis">{{ item.website_article_info }}</view>
					</view>
				</view>
			</view>

			<!-- 卡片式 -->
			<view class="padding30" v-if="pageSet.style == 2">
				<view class="card padding30 m-bot30 bor_radius_20 bgwhite" v-for="(item, index) in artList" :key="index" @click="$pop.artDetails(item)">
					<view class="d-flex a-center m-bot30 color_77">
						<view class="m-right40">{{ item.website_article_addtime }}</view>
						<view class="flex-1">{{ item.website_article_views }}阅读</view>
						<view>
							<text class="iconfont icon-guanzhu3 size36 thmeColor" v-if="item.myZan == 1" @click.stop="artZan(item)"></text>
							<text class="iconfont icon-guanzhu size36" v-if="item.myZan == 0" @click.stop="artZan(item)"></text>
							<text class="m-left4">{{ item.allZan }}</text>
						</view>
					</view>
					<view class="tit ellipsis_2 m-bot20">{{ item.website_article_title }}</view>
					<view class="info ellipsis_2 m-bot20" v-if="item.website_article_info">{{ item.website_article_info }}</view>
					<image :src="$imgUrls(item.website_article_img)" mode="widthFix" v-if="item.website_article_img"></image>
					<image :src="$imgUrls(item.website_article_atlas[0])" mode="widthFix" v-else-if="item.website_article_atlas"></image>
				</view>
			</view>
		</view>

		<empty v-if='nothing' cat='3' msg='没有找到相关内容哦 ~'></empty>
		
		<tabBar :tab="9"></tabBar>

		<showModel @cancelFunc='showModal=false' goHome='0' v-if='showModal' type='2'></showModel>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import Bannel from '@/components/home/Bannel.vue'
	import adv from '@/components/home/adv.vue'
	import hotZone from '@/components/home/hotZone.vue'
	import VideoList from '@/components/home/VideoList.vue'
	import divider from '@/components/home/divider.vue'
	export default {
		data() {
			return {
				staticUrl: this.staticUrl,
				artList: [], // 文章列表
				columnData: '', // 分类列表
				listId: '', // 列表id
				page: 1, // 分页页码
				more: false,
				nothing: false,
				toTop: false,
				checkId: -1, // 当前选中标签的索引
				fromShare: 0,
				pageSet: { // 页面设置
					style: 0, 
					bgColor: '#fff', 
					titSize: 16, 
					titWeight: 300, 
					titColor: '#000',
					infoSize: 14, 
					infoWeight: 300, 
					infoColor: '#777'
				},
				pageData: '', // diy组件
				showModal: false
			}
		},
		components: {
			Bannel, adv, hotZone, VideoList, divider
		},
		onLoad(e) {
			if(e.listId) this.listId = e.listId
			if(e.fromShare) this.fromShare = e.fromShare
			this.diyget()
		},
		onShow(){
			this.getColumn()
		},
		methods: {
			diyget(){
				this.$http.get({
					url: '/newdiy/api/v1/diy/getDiyPage',
					data: {
						front: 1,
						type: 3
					}
				}).then(res=>{
					if(!res.data) return
					if(res.data.pageSet) this.pageSet = res.data.pageSet
					this.pageData = res.data.front_value || []
				})
			},
			getColumn() {
				this.$http.post({
					url: '/zzj_singleSaleApi/getWebsiteList'
				}).then(res => {
					if (res.data && res.data.length) {
						this.columnData = res.data
						if (!this.listId) {
							this.checkId = 0
							this.listId = res.data[0].website_list_id
						}
						let index = this.columnData?.findIndex(item=>item.website_list_id == this.listId)
						this.checkId = index == -1 ? 0 : index
						this.getList()
					} else {
						this.nothing = true
					}
				})
			},
			checkList({index, website_list_id}) {
				if (this.checkId != index) {
					this.checkId = index
					this.artList = []
					this.page = 1
					this.$showLoading('加载中')
					this.listId = website_list_id
					this.getList()
				}
			},
			getList() {
				this.more = false
				this.nothing = false
				this.$http.post({
					url: '/zzj_singleSaleApi/getArticle',
					data: {
						listId: this.listId,
						pagecount: 10,
						page: this.page
					}
				}).then(res => {
					this.$hideLoading()
					if (res.data) {
						res.data.forEach(item => {
							if (item.website_article_atlas) {
								item.website_article_atlas = item.website_article_atlas.split(",")
							}
						})
						this.artList = this.page == 1 ? res.data : this.artList.concat(res.data)	
						if (res.data.length > 9) this.more = true
						// this.$BarTitle(res.listTitle)
					}
					
					if (!this.artList || this.artList.length < 1) this.nothing = true
				
				})
			},
			artZan(item){
				if(!this.vid) return this.showModal = true
				this.$http.post({
					url: '/zzj_singleSaleApi/zanArticle',
					data: {
						article_id: item.website_article_id,
						operation: item.myZan == 1 ? 2 : 1 // 点赞传1，取消传2，zan为1是已点赞
					}
				}).then(res=>{
					if(res.code != 100) return this.$Toast(res.msg)
					item.myZan = item.myZan == 1 ? 0 : 1
					let num = parseInt(item.allZan)
					item.allZan = item.myZan == 1 ? num + 1 : num - 1
				})
			}
		},
		onReachBottom() {
			if (this.more) {
				this.page += 1
				this.getList()
			}
		},
		computed:{
			...mapState(['color','totalHeight','tabTitle','vid','share']),
		},
		onShareAppMessage() {
			let share = this.share
			return {
				title: share.title,
				desc: share.desc,
				path: `/pages/index/index?share_v_id=${this.vid}&pageType=5&listId=${this.listId}`,
				imageUrl: share.imageUrl
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 100) {
				this.toTop = true
			} else {
				this.toTop = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: var(--bgcolor);
	}
	.classNav {
		position: sticky;
		top: 0;
		left: 0;
		right: 0; // 解决右侧遮挡
		z-index: 33;
		background: var(--bgcolor);
	}
	.list_one_img{
		width:200rpx;
		height: 120rpx;
	}
	.list_MAX_img{
		width:100%;
		height: 340rpx;
	}
	.list_more_img{
		width:210rpx;
		height: 180rpx;
		&:not(:last-child){
			margin-right: 30rpx;
		}
	}
	.photo {
		width: 350rpx;
		image {
			width: 100%;
			height: 524rpx;
			border-radius: 10rpx;
		}
	}
	.card {
		box-shadow: 0 2px 12px rgba(100,101,102,.12);
		image {
			width: 436rpx;
		}
	}
	.tit {
		font-size: var(--tit-size);
		color: var(--tit-color);
		font-weight: var(--tit-weight);
	}
	.info {
		font-size: var(--info-size);
		color: var(--info-color);
		font-weight: var(--info-weight);
	}
</style>